<template>
  <div class="seconds-box">
    <!-- 秒杀 -->
    <div class="seconds-header">
      <span>嗨购秒杀</span>
      <span>10点场</span>
      <span class="countdown-box">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </span>
      <span>爆款轮番秒</span>
    </div>
    <!-- 列表 -->
    <ul class="seconds-list">
      <li v-for="item in imgs" :key="item.proid">
        <img :src="item.img1" />
        <p>¥{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      imgs: [],
    };
  },
  created() {
    this.$http
      .get("/pro/seckilllist", {
        params: {
          count: 1,
          limitNum: 6,
        },
      })
      .then((res) => {
        if (res.data.code === "200") {
          this.imgs = res.data.data;
        }
      });
  },
};
</script>

<style scoped>
.seconds-box {
  width: 100%;
  height: 8.125rem;
  /* background-color: skyblue; */
}
.seconds-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  /* border: 1px solid black; */
  justify-content: space-around;
  align-items: center;
  background: url()
    no-repeat center center;
  background-size: cover;
}
.seconds-header span {
  /* border: 1px solid black; */
}
.countdown-box {
  width: 140px;
}
.seconds-list {
  width: 100%;
  height: 90px;
  /* background: pink; */
  display: flex;
  justify-content: space-around;
  color: #ff6666;
  font-weight: 800;
}
.seconds-list img {
  width: 60px;
  height: 60px;
}

/* vant样式 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
</style>